<template>
<!--    登录界面-->
    <div style="width: 400px;margin: auto" v-if='title===1'>
        <h1>请登陆</h1>
        <el-form :model="userForm" status-icon :rules="rulee" ref="userForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
                <el-input type="username" v-model="userForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="userForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('userForm')">提交</el-button>
                <el-button @click="registered()">注册</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div style="width: 400px;margin: auto" v-else>
        <h1>注册界面</h1>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="手机号" prop="username">
                <el-input type="username" v-model="ruleForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="验证码" style="width: 300px" prop="verifycode">
                <div style="position: absolute" >
                    <el-input type="verifycode" v-model="ruleForm.verifycode" autocomplete="off"></el-input>
                </div>
                <div style="position: relative;left: 160px">
                    <span @click="refreshCode" style="cursor: pointer;"><s-identify :identifyCode="identifyCode"></s-identify></span>
                </div>
            </el-form-item>
            <el-form-item label="手机号" hidden>
                <el-input type="password" v-model="ruleForm.passwrod" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="login()">登陆</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import SIdentify from '@/components/identify'
    export default {
        components: { SIdentify },
        name: "Login",
        data() {
            var checkphone = (rule, value, callback) => {
                // let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
                if (value === '') {
                    callback(new Error("请输入手机号"));
                } else if (!(/^1[34578]\d{9}$/.test(value))) {//引入methods中封装的检查手机格式的方法
                    callback(new Error("请输入正确的手机号!"));
                } else {
                    callback();
                }
            }
            const validateVerifycode = (rule, value, callback) => {
                const newVal = value
                const identifyStr = this.ruleForm.identifyCode
                if (newVal === '') {
                    callback(new Error('请输入验证码'))
                } else if (!newVal===identifyStr) {
                    console.log('validateVerifycode:', value)
                    callback(new Error('验证码不正确!'))
                } else {
                    callback()
                }
            }
            return {
                username:'',
                password:'',
                // 图片验证码
                identifyCode: '',
                // 验证码规则
                identifyCodes: '3456789ABCDEFGHGKMNPQRSTUVWXY',
                labelPosition: 'right',
                title: 1,
                userForm: {
                    username: 'admin',
                    password: '123'
                },
                ruleForm: {
                    username: '',
                    verifycode:'',
                    passwrod:'123'
                },
                rulee:{
                    username: [
                        {required: true, message: '用户名不能为空', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '密码不能为空', trigger: 'blur'}
                    ]
                },
                rules: {
                    username: [
                        {required: true, validator: checkphone, trigger: "blur"},
                    ],
                    verifycode: [
                        { required: true, trigger: 'blur', validator: validateVerifycode }
                    ],
                }
            }
        },
        mounted() {
            // 验证码初始化
            this.identifyCode = ''
            this.makeCode(this.identifyCodes, 4)
        },
        methods: {
            // 切换验证码
            refreshCode() {
                this.identifyCode = ''
                this.makeCode(this.identifyCodes, 4)
            },
            // 生成随机验证码
            makeCode(o, l) {
                for (let i = 0; i< l; i++) {
                    this.identifyCode += this.identifyCodes[
                        Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0)
                        ]
                }
            },
            //http://localhost/oauth/token?client_id=demoClientId&client_secret=demoClientSecret&grant_type=password&username=demoUser&password=50575tyL86xp29O380t1
            submitForm(formName) {
                if(this.title===1){
                    this.username=this.userForm.username;
                    this.password=this.userForm.password;
                }else{
                    this.username=this.ruleForm.username;
                    this.password=this.ruleForm.passwrod;
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$http.post('user/user/login', {
                            username: this.username,
                            password: this.password
                        }).then(response => {
                            console.log(response);
                            if (response.code === 20000) {
                                this.$notify({
                                    title: '成功',
                                    message: '登录成功',
                                    type: 'success'
                                });
                                //console.log(response.data["access_token"])
                                var access = response.data.accessToken
                                var token1 = 'bearer' + ' ' + access;
                                sessionStorage.setItem("token", token1);
                                // beaer token
                                this.$router.replace({name: 'main', query: {username:this.username}});
                            } else {
                                this.$notify.error({
                                    title: '失败',
                                    message: '登录失败',
                                });
                            }
                        })
                    }
                })
            },
            registered() {
                this.title = 2;
            },
            login() {
                this.title = 1;
            }
        }
    }
</script>

<style scoped>
    /*滑动验证*/
    .drag {
        position: relative;
        background-color: #e8e8e8;
        width: 100%;
        height: 34px;
        line-height: 34px;
        text-align: center;
    }

    .handler {
        width: 40px;
        height: 32px;
        border: 1px solid #ccc;
        cursor: move;
    }

    .handler_bg {
        background: #fff url("") no-repeat center;
    }

    .handler_ok_bg {
        background: #fff url("") no-repeat center;
    }

    .drag_bg {
        background-color: #7ac23c;
        height: 34px;
        width: 0px;
    }

    .drag_text {
        position: absolute;
        top: 0px;
        width: 100%;
        text-align: center;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        -o-user-select: none;
        -ms-user-select: none;
    }
</style>
